<template>
  <div class="mul-table">
    <div class="scheme-box">
      <el-table
        highlight-current-row
        border
        :header-cell-style="{ border: 'solid 0.5px #d2d3da' }"
        stripe
        fit
        ref="table"
        align="left"
        :data="state.tableData"
        v-loading="dataListLoading"
        :cell-class-name="cellClassName"
        @selection-change="selectionChange"
      >
        <el-table-column prop="leftTitle" label="模型" show-overflow-tooltip align="center">
          <template #default="{ row }">{{ row[0] }}</template>
        </el-table-column>
        <el-table-column prop="scName" label="洪峰流量" show-overflow-tooltip align="center">
          <el-table-column
            v-for="(item, index) in state.schemeArr"
            :label="item.scName"
            :key="index"
            :min-width="item.width"
            :show-overflow-tooltip="true"
            align="center"
          >
            <template #default="scope">{{ switchData(scope.$index, item) }}</template>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="scName" label="洪量" show-overflow-tooltip align="center">
          <el-table-column
            v-for="(item, index) in state.schemeArr"
            :label="item.scName"
            :key="index"
            :min-width="item.width"
            :show-overflow-tooltip="true"
            align="center"
          >
            <template #default="scope">{{ switchLiangData(scope.$index, item) }}</template>
          </el-table-column>
        </el-table-column>
        <!-- <el-table-column prop="scName" label="水位" show-overflow-tooltip align="center">
            <el-table-column
              v-for="(item, index) in state.schemeArr"
              :label="item.scName"
              :key="index"
              :min-width="item.width"
              :show-overflow-tooltip="true"
              align="center"
            >
              <template #default="{  }">{{ 1 }}</template>
            </el-table-column>
          </el-table-column>-->
        <el-table-column prop="scName" label="洪现时间" show-overflow-tooltip align="center">
          <el-table-column
            v-for="(item, index) in state.schemeArr"
            :label="item.scName"
            :key="index"
            :min-width="item.width"
            :show-overflow-tooltip="true"
            align="center"
          >
            <template #default="scope">{{ switchTimeData(scope.$index, item) }}</template>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="scName" label="纳什系数" show-overflow-tooltip align="center">
          <el-table-column
            v-for="(item, index) in state.schemeArr"
            :label="item.scName"
            :key="index"
            :min-width="item.width"
            :show-overflow-tooltip="true"
            align="center"
          >
            <template #default="scope">{{ switchNumData(scope.$index, item) }}</template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { addArea, getAreaSecList } from '@/services/modules/compute-methods'
const props = defineProps({
  watershedId: {
    type: Number,
    default: 1
  },
  mulData: {
    type: Array,
    default: () => []
  }
})
watch(
  () => {
    props.mulData
  },
  () => {
    state.tableData = []
    handleOpenModal(props.mulData)
  },
  {
    deep: true
  }
)
onMounted(() => {})
const emit = defineEmits(['closeDialog'])
const closeDialog = () => {
  emit('closeDialog', false)
}
const state = reactive({
  schemeArr: [],
  originTitle: ['模拟', '实测', '误差', '许可误差'],
  transTitle: ['', '洪峰', '洪量', '水位', '洪峰时间'],

  eigResultArr: [],
  tableData: ['', '', '', '', '']
})
//左侧表头
let keyList = [
  {
    key: 'imitate',
    label: '模拟'
  },
  {
    key: 'real',
    label: '实测'
  },
  {
    key: 'error',
    label: '误差'
  },
  {
    key: 'allowError',
    label: '许可误差'
  }
]
//顶部表头
let rowTitle = [
  { label: '方案1', width: 80 },
  { label: '方案2', width: 80 }
]

//洪峰数据转换
function switchLiangData(index, item) {
  switch (index) {
    case 0:
      return item.hongfeng.fcMxq
    case 1:
      return item.hongfeng.rlMxq
    case 2:
      return item.hongfeng.erMxq
    case 3:
      return '--'
    default:
      ''
      break
  }
}
//洪量数据转换
function switchData(index, item) {
  switch (index) {
    case 0:
      return item.hongliang.fcV
    case 1:
      return item.hongliang.rlV
    case 2:
      return item.hongliang.erV
    case 3:
      return '--'
    default:
      ''
      break
  }
}
//时间数据转换
function switchTimeData(index, item) {
  switch (index) {
    case 0:
      return item.time.fcMxt
    case 1:
      return item.time.rlMxt
    case 2:
      return item.time.erMxt
    case 3:
      return item.time.alerMxt
    default:
      ''
      break
  }
}
//纳什系数
function switchNumData(index, item) {
  switch (index) {
    case 0:
      return item.num.cerCoe
    case 1:
      return item.num.cerCoe
    case 2:
      return item.num.cerCoe
    case 3:
      return item.num.cerCoe
    default:
      ''
      break
  }
}

//保存区域
function handleSave() {}
function handleOpenModal(item) {
  console.log(item, '水库水位（实测.')
  state.eigResultArr = item
  let arr = []
  state.eigResultArr.forEach((item) => {
    arr.push({ ...item.eigResult[0], scName: item.scInfo.sc_name })
  })
  state.schemeArr = arr

  state.schemeArr = state.schemeArr.map((item) => {
    return {
      ...item,
      hongfeng: { fcMxq: item.fcMxq, rlMxq: item.rlMxq, erMxq: item.erMxq, alerMxt: item.alerMxt },
      hongliang: { fcV: item.fcV, rlV: item.rlV, erV: item.erV, alerMxt: item.alerMxt },
      time: { fcMxt: item.fcMxt, rlMxt: item.rlMxt, erMxt: item.erMxt, alerMxt: item.alerMxt },
      num: { cerCoe: item.cerCoe, cerCoe: item.cerCoe, cerCoe: item.cerCoe, cerCoe: item.cerCoe }
    }
  })
  console.log(state.schemeArr, 'arr')

  let matrixData = state.schemeArr.map((row) => {
    let arr = []
    for (let key in row) {
      arr.push(row[key])
    }
    return arr
  })
  console.log('22', matrixData)

  // 加入标题拼接最终的数据
  state.tableData = matrixData[0].map((col, i) => {
    return [state.originTitle[i], ...matrixData]
  })
  state.tableData = state.tableData.slice(0, 4)
}
</script>

<style lang="less" scoped>
.mul-table {
  .my-header {
    height: 35px;
    border-bottom: 2px solid #eee;
  }
  :deep(.el-table) {
    border: none;
    .el-table__row {
      border: 1px solid red;
    }
    th {
      background-color: #f5f4f4;
      height: 44px;
    }

    td.el-table__cell {
      height: 58px;
    }

    .el-table__body tr:hover > td {
      background: #fff !important;
    }

    .el-table__body tr:hover > td:nth-child(1) {
      background: #f5f4f4 !important;
    }

    td.el-table__cell,
    th.el-table__cell.is-leaf {
      // border-right: 1px solid #ebeef5 !important;
      // border-bottom: 1px solid #ebeef5 !important;
    }

    td.el-table__cell:nth-child(1) {
      background: #f5f4f4;

      .cell {
        text-align: center;
      }
    }

    td.el-table__cell:last-child,
    th.el-table__cell.is-leaf:last-child {
      border-right: none !important;
    }
  }
}
</style>
